<template>
  <div :style="{width: diagramWidth+'px',position:'relative',height: diagramHeight+'px'}">
    <div style="position: absolute;bottom:0;right: 0" v-if="colorPalette">
      <el-tooltip class="item" effect="dark" content="完成节点颜色" placement="top-start">
        <el-color-picker v-model="colors.completed" size="mini" @change="setColor"
                         :predefine="['#409EFF','#67C23A','#bbbbbb']"></el-color-picker>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="当前节点颜色" placement="top-start">
        <el-color-picker v-model="colors.current" size="mini" @change="setColor"
                         :predefine="['#409EFF','#67C23A','#bbbbbb']"></el-color-picker>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="默认颜色" placement="top-start">
        <el-color-picker v-model="colors.normal" size="mini" @change="setColor"
                         :predefine="['#409EFF','#67C23A','#bbbbbb']"></el-color-picker>
      </el-tooltip>
    </div>
    <div v-if="floatingFrame">
      <el-popover placement="left"
                  width="300" @show="showF(v)"
                  trigger="click"
                  v-for="(v,i) in elements" :key="i"
                  v-if="dox.indexOf(v.type)>=0 && (v.current || v.completed)">
        <slot name="task-popover"></slot>
        <slot name="task-comment"></slot>
        <slot name="task-back" v-if="!v.current"></slot>
        <el-button slot="reference"
                   :style="{top:v.y-(diagramBeginY/2)+'px',left:v.x-(diagramBeginX/2)+'px',width:v.width+'px',height:v.height+'px'}"
                   class="my-btn"></el-button>
      </el-popover>
    </div>
    <svg :width="diagramWidth+'px'" :height="diagramHeight+'px'"
         xmlns="http://www.w3.org/2000/svg">
      <!--      元素开始-->
      <g :transform="'translate('+(diagramBeginX/2*-1)+','+(diagramBeginY/2*-1)+')'">
        <!--      定位-->
        <use :x="v.x" :y="v.y" rx="10" ry="10" v-for="(v,i) in elements" v-bind:xlink:href="'#'+v.id"></use>
        <!--      元素-->
        <defs>
          <g :x="v.x" :y="v.y" rx="10" ry="10" v-for="(v,i) in elements" :id="v.id"
             style="text-align: center;font-size: 12px">
            <!--          方形-->
            <g v-if="dox.indexOf(v.type)>-1">
              <rect
                  :width="v.width" :height="v.height" x="0" y="0" rx="10" ry="10"
                  :style="{fill:'#f9f9f9', stroke:getColor(v),'stroke-width':1} "
                  fill="url(#idTest)"/>
              <use v-bind:xlink:href="'#'+ (v.taskType?v.taskType:v.type)" width="17" height="17" x="5" y="5"/>
              <!--  中间文字-->
              <text
                  fill="rgb(88,88,88)" :x="v.width/2" :y="v.height/2"
                  text-anchor="middle" dominant-baseline="middle">
                {{ v.name }}
              </text>
            </g>
            <g v-else>
              <!--   在下面的文字-->
              <text v-if="v.x"
                    fill="rgb(88,88,88)" :x="v.width/2" :y="v.height+10"
                    text-anchor="middle" dominant-baseline="middle">
                {{ v.name }}
              </text>
            </g>
            <!--          菱形-->
            <g v-if="diamond.indexOf( v.type )>-1">
              <!--          路由-->
              <rect width="30" height="30" x="0" y="0" rx="5" ry="5"
                    :transform=" 'rotate(45 12 23)'"
                    :style="{fill:'rgb(249,249,249)',stroke:getColor(v,true),'stroke-width':1,'fill-opacity':0.6} "
                    fill="url(#idTest)"/>
              <use v-bind:xlink:href="'#'+v.type" width="25" height="25" x="7" y="7" :fill="getColor(v,true)"/>
            </g>
            <!--          圆形-->
            <g v-if="round.indexOf( v.type )>-1">
              <circle :cx="v.width / 2" :cy="v.width / 2" :r="v.width / 2"
                      :style="{stroke:getColor(v,true),fill:'none','stroke-width':'EndEvent' === v.type?3:1}"/>
              <use v-bind:xlink:href="'#'+v.eventDefinition.type" width="22" height="22" x="4" y="4"
                   :fill="getColor(v,true)"
                   v-if="v.eventDefinition"/>
            </g>
            <!--     虚线容器-->
            <g v-if="container.indexOf( v.type )>-1">
              <rect x="0" y="0" :width="v.width" :height="v.height" rx="10" ry="10" stroke="#bbbbbb" stroke-width="1"
                    stroke-dasharray="2,2,2" fill="#ffffff"></rect>
            </g>
            <!--            标题字-->
            <g v-if="'TextAnnotation'===v.type">
              <rect x="0" y="0" :width="v.width" :height="v.height" stroke="none" fill="none"></rect>
              <path d=" M19 0  L0 0  L0 49  L19 49 " stroke="#585858" fill="none" stroke-width="1"></path>
              <text font-size="12"
                    x="4" y="24" stroke="#373e48" stroke-width="0pt" letter-spacing="0px" transform="rotate(0 4 24)"
                    text-anchor="start">
                <tspan x="4" y="24" dy="5">{{ v.text }}</tspan>
              </text>
            </g>
          </g>
        </defs>
        <!--      连线-->
        <g v-for="(v,k) in flows">
          <polyline fill="none" stroke="black"
                    :style="{stroke:getColor(v,true),'stroke-width':1.5}"
                    :points="getPoints(v)" :marker-end="v.completed?'url(#idArrowRed)':'url(#idArrow)'"></polyline>
          <defs>
            <path :d="getPath(v)" :id="v.id"
                  style="fill:none;"/>
          </defs>
          <text :x="getWx(v)" :y="getWy(v)" transform="translate(0,12)" fill="rgb(88,88,88)" text-anchor="middle"
                dominant-baseline="middle" font-size="12">
            <textPath v-bind:xlink:href="'#'+v.id" fill="rgb(88,88,88)">{{ v.name }}</textPath>
          </text>
        </g>
        <!--箭头-->
        <defs>
          <marker id="idArrow"
                  viewBox="0 0 20 20" refX="20" refY="10"
                  markerUnits="strokeWidth" markerWidth="6" markerHeight="10"
                  orient="auto">
            <path d="M 0 0 L 20 10 L 0 20 z" :fill="colors.deepColor" :stroke="colors.deepColor"/>
          </marker>
        </defs>
        <!--      红箭头-->
        <defs>
          <marker id="idArrowRed"
                  viewBox="0 0 20 20" refX="20" refY="10"
                  markerUnits="strokeWidth" markerWidth="6" markerHeight="10"
                  orient="auto">
            <path d="M 0 0 L 20 10 L 0 20 z" :fill="colors.completed" :stroke="colors.completed"/>
          </marker>
        </defs>
        <!-----------------------------------     图标-->
        <defs>
          <svg id="UserTask">
            <path style="fill:#d1b575;stroke:none;"
                  d="m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111 l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c 0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17"
                  id="sid-25A2D085-0B17-46EA-9689-36FE1424D7E7_sid-25A2D085-0B17-46EA-9689-36FE1424D7E7_17"></path>
          </svg>
          <svg id="ExclusiveGateway" t="1610986662322" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="11448" width="200" height="200">
            <g>
              <path d="M461.15 83.21h101.92v285.81H461.15z" p-id="11449"></path>
              <path
                  d="M548 98.21l0.09 255.8h-71.9l-0.08-255.81H548m30-30H446.1v30l0.09 255.8v30h131.93v-30L578 98.2v-30z"
                  fill="#FFFFFF" p-id="11450"></path>
              <path d="M83.04 461.13h283.75v102H83.04z" p-id="11451"></path>
              <path d="M351.79 476.12v72H98v-72h253.79m30-30H68v132h313.79v-132z" fill="#FFFFFF" p-id="11452"></path>
              <path d="M657 461.37h285.87v102H657z" p-id="11453"></path>
              <path d="M927.87 476.37v72H672v-72h255.87m30-30H642v132h315.87v-132z" fill="#FFFFFF" p-id="11454"></path>
              <path d="M461.12 655.98h101.95v285.65H461.12z" p-id="11455"></path>
              <path d="M548.05 671l0.05 255.64h-72V670.99h71.95m30-30h-132v315.64h132V641z" fill="#FFFFFF"
                    p-id="11456"></path>
              <path
                  d="M511.5 511.5m-40.52429 40.52429a57.31 57.31 0 1 0 81.04858-81.04858 57.31 57.31 0 1 0-81.04858 81.04858Z"
                  p-id="11457"></path>
              <path
                  d="M511.5 469.19a42.31 42.31 0 1 1-42.31 42.31 42.31 42.31 0 0 1 42.31-42.31m0-30a72.31 72.31 0 1 0 72.31 72.31 72.39 72.39 0 0 0-72.31-72.31z"
                  fill="#FFFFFF" p-id="11458"></path>
            </g>
          </svg>
          <!--          并行网管-->
          <svg id="ParallelGateway" t="1611141958892" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="32080" width="200" height="200">
            <path
                d="M988.224 294.048L750.88 111.584a9.664 9.664 0 0 0-11.744-0.064 9.76 9.76 0 0 0-3.2 11.296l47.744 120.8-16.704 0.032L32 243.712v116.096h751.68l-47.712 120.8a9.6 9.6 0 0 0 3.168 11.296 9.6 9.6 0 0 0 11.712-0.032l237.376-182.496a9.664 9.664 0 0 0 0-15.328z m0 420.512L750.848 532.096a9.664 9.664 0 0 0-14.88 11.232l47.712 120.864H32v116.064l735.008 0.064 16.672 0.064-47.712 120.8a9.696 9.696 0 0 0 14.912 11.264l237.376-182.496a9.824 9.824 0 0 0-0.032-15.392z"
                p-id="32081"></path>
          </svg>
          <!--          包容网关-->
          <svg id="EventBasedGateway" t="1611038510843" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="22053" width="200" height="200">
            <path
                d="M600.64 68.736L955.264 423.36a125.344 125.344 0 0 1 0 177.28L600.64 955.264a125.344 125.344 0 0 1-177.28 0L68.736 600.64a125.344 125.344 0 0 1 0-177.28L423.36 68.736a125.344 125.344 0 0 1 177.28 0z m-128.64 27.936l-5.632 4.992L101.664 466.368a64.48 64.48 0 0 0-4.992 85.6l4.992 5.664 364.704 364.704c23.136 23.136 59.936 25.28 85.6 4.992l5.664-4.992 364.704-364.704c23.136-23.136 25.28-59.936 4.992-85.6l-4.992-5.664L557.632 101.664a64.48 64.48 0 0 0-85.6-4.992z"
                p-id="22054" fill="#707070"></path>
            <path d="M512 288a224 224 0 1 1 0 448 224 224 0 0 1 0-448z m0 48a176 176 0 1 0 0 352 176 176 0 0 0 0-352z"
                  p-id="22055" fill="#707070"></path>
          </svg>
          <!--事件网关-->
          <svg id="EventGateway" t="1611142025983" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="32851" width="200" height="200">
            <path
                d="M511.96388 0.03612c-282.710688 0-511.89164 229.217072-511.89164 512.03612 0 282.602328 229.180952 511.89164 511.89164 511.89164 282.746808 0 512-229.289312 512-511.89164C1023.96388 229.289312 794.710688 0.03612 511.96388 0.03612zM512 979.536367c-258.149136 0-467.428007-209.314991-467.428007-467.464127 0-258.185256 209.278871-467.464127 467.428007-467.464127 258.113016 0 467.428007 209.278871 467.428007 467.464127C979.428007 770.221376 770.149136 979.536367 512 979.536367zM644.95746 167.957672 254.464903 512.397319 537.283951 559.858907 397.716543 853.008254 765.923104 469.848042 504.161975 433.439153Z"
                p-id="32852"></path>
          </svg>
          <!--          包容-->
          <svg id="InclusiveGateway" t="1611128130944" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="31101" width="200" height="200">
            <path
                d="M512 105.8816c-224.0512 0-406.1184 182.272-406.1184 406.1184S287.9488 918.1184 512 918.1184 918.1184 736.0512 918.1184 512 736.0512 105.8816 512 105.8816z m0 918.1184c-136.8064 0-265.3184-53.3504-362.0864-149.9136C53.1456 777.3184 0 648.8064 0 512s53.3504-265.3184 149.9136-362.0864C246.6816 53.1456 375.1936 0 512 0s265.3184 53.3504 362.0864 149.9136c96.768 96.768 149.9136 225.28 149.9136 362.0864s-53.1456 265.3184-149.9136 362.0864S648.8064 1024 512 1024z"
                p-id="31102"></path>
          </svg>
          <svg id="ManualTask">
            <path style="fill:#d1b575;stroke:none"
                  d="m 17,9.3290326 c -0.0069,0.5512461 -0.455166,1.0455894 -0.940778,1.0376604 l -5.792746,0 c 0.0053,0.119381 0.0026,0.237107 0.0061,0.355965 l 5.154918,0 c 0.482032,-0.0096 0.925529,0.49051 0.919525,1.037574 -0.0078,0.537128 -0.446283,1.017531 -0.919521,1.007683 l -5.245273,0 c -0.01507,0.104484 -0.03389,0.204081 -0.05316,0.301591 l 2.630175,0 c 0.454137,-0.0096 0.872112,0.461754 0.866386,0.977186 C 13.619526,14.554106 13.206293,15.009498 12.75924,15 L 3.7753054,15 C 3.6045812,15 3.433552,14.94423 3.2916363,14.837136 c -0.00174,0 -0.00436,0 -0.00609,0 C 1.7212035,14.367801 0.99998255,11.458641 1,11.458641 L 1,7.4588393 c 0,0 0.6623144,-1.316333 1.8390583,-2.0872584 1.1767614,-0.7711868 6.8053358,-2.40497 7.2587847,-2.8052901 0.453484,-0.40032 1.660213,1.4859942 0.04775,2.4010487 C 8.5332315,5.882394 8.507351,5.7996113 8.4370292,5.7936859 l 6.3569748,-0.00871 c 0.497046,-0.00958 0.952273,0.5097676 0.94612,1.0738232 -0.0053,0.556126 -0.456176,1.0566566 -0.94612,1.0496854 l -4.72435,0 c 0.01307,0.1149374 0.0244,0.2281319 0.03721,0.3498661 l 5.952195,0 c 0.494517,-0.00871 0.947906,0.5066305 0.940795,1.0679848 z"
                  id="sid-C2B89B87-D36A-4F51-BD18-889F6A2C6D48_sid-C2B89B87-D36A-4F51-BD18-889F6A2C6D48_17"></path>
          </svg>
          <!--          邮箱-->
          <svg id="ReceiveTask">
            <path style="fill:#16964d;stroke:none;"
                  d="m 0.5,2.5 0,13 17,0 0,-13 z M 2,4 6.5,8.5 2,13 z M 4,4 14,4 9,9 z m 12,0 0,9 -4.5,-4.5 z M 7.5,9.5 9,11 10.5,9.5 15,14 3,14 z"
                  id="sid-EFF9D1BE-D417-4B08-8D14-12EB1A595CEC_sid-EFF9D1BE-D417-4B08-8D14-12EB1A595CEC_17"></path>
          </svg>
          <!--          业务-->
          <svg id="BusinessRuleTask">
            <path
                d="m 1,2 0,14 16,0 0,-14 z m 1.45458,5.6000386 2.90906,0 0,2.7999224 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.7999224 -8.72718,0 z m -4.36364,4.1998844 2.90906,0 0,2.800116 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.800116 -8.72718,0 z"
                style="fill:#72a7d0;stroke:none"
                id="sid-B0520F03-3F76-4181-896A-C2D1A09FF846_sid-B0520F03-3F76-4181-896A-C2D1A09FF846_19"></path>
          </svg>

          <!--          收信箱-->
          <svg id="mail">
            <path style="fill:#16964d;stroke:none;"
                  d="M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15 L 17 15 L 12 10 L 9 13 L 6 10 z "
                  id="sid-1E0CAD76-9141-4ADE-8FE7-2E43A3583788_sid-1E0CAD76-9141-4ADE-8FE7-2E43A3583788_17"></path>
          </svg>
          <!--          决策-->
          <svg id="ServiceTask">
            <path
                d="m 1,2 0,14 16,0 0,-14 z m 1.9,2.4000386 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z"
                style="fill:#72a7d0;stroke:none"
                id="sid-7C9B2873-5692-4D7E-B4C9-34BA56A26A39_sid-7C9B2873-5692-4D7E-B4C9-34BA56A26A39_17"></path>
          </svg>
          <!--          驼峰-->
          <svg id="camel">
            <path style="fill:#bd4848;fill-opacity:1"
                  d=" m8.549999979999997 15.383782  c-0.824818 -0.3427 0.375093 -1.1925 0.404055 -1.7743  c0.230509 -0.8159 -0.217173 -1.5329 -0.550642 -2.2283  c-0.106244 -0.5273 -0.03299 -1.8886005 -0.747194 -1.7818005  c-0.712355 0.3776 -0.9225 1.2309005 -1.253911 1.9055005  c-0.175574 1.0874 -0.630353 2.114 -0.775834 3.2123  c-0.244009 0.4224 -1.741203 0.3888 -1.554386 -0.1397  c0.651324 -0.3302 1.13227 -0.9222 1.180246 -1.6705  c0.0082 -0.7042 -0.133578 -1.3681 0.302178 -2.0083  c0.08617 -0.3202 0.356348 -1.0224005 -0.218996 -0.8051  c-0.694517 0.2372 -1.651062 0.6128 -2.057645 -0.2959005  c-0.696769 0.3057005 -1.102947 -0.611 -1.393127 -1.0565  c-0.231079 -0.6218 -0.437041 -1.3041 -0.202103 -1.9476  c-0.185217 -0.7514 -0.39751099 -1.5209 -0.35214999 -2.301  c-0.243425 -0.7796 0.86000899 -1.2456 0.08581 -1.8855  c-0.76078999 0.1964 -1.41630099 -0.7569 -0.79351899 -1.2877  c0.58743 -0.52829998 1.49031699 -0.242 2.09856399 -0.77049998  c0.816875 -0.3212 1.256619 0.65019998 1.923119 0.71939998  c0.01194 0.7333 -0.0031 1.5042 -0.18417 2.2232  c-0.194069 0.564 -0.811196 1.6968 0.06669 1.9398  c0.738382 -0.173 1.095723 -0.9364 1.659041 -1.3729  c0.727298 -0.3962 1.093982 -1.117 1.344137 -1.8675  c0.400558 -0.8287 1.697676 -0.6854 1.955367 0.1758  c0.103564 0.5511 0.9073983 1.7538 1.2472763 0.6846  c0.121868 -0.6687 0.785541 -1.4454 1.518183 -1.0431  c0.813587 0.4875 0.658233 1.6033 1.285504 2.2454  c0.768715 0.8117 1.745394 1.4801 2.196633 2.5469  c0.313781 0.8074 0.568552 1.707 0.496624 2.5733  c-0.35485 0.8576005 -1.224508 -0.216 -0.64725 -0.7284  c0.01868 -0.3794 -0.01834 -1.3264 -0.370249 -1.3272  c-0.123187 0.7586 -0.152778 1.547 -0.10869 2.3154  c0.270285 0.6662005 1.310741 0.7653005 1.060553 1.6763005  c-0.03493 0.9801 0.294343 1.9505 0.148048 2.9272  c-0.320479 0.2406 -0.79575 0.097 -1.185062 0.1512  c-0.165725 0.3657 -0.40138 0.921 -1.020848 0.6744  c-0.564671 0.1141 -1.246404 -0.266 -0.578559 -0.7715  c0.679736 -0.5602 0.898618 -1.5362 0.687058 -2.3673  c-0.529674 -1.108 -1.275984 -2.0954005 -1.839206 -3.1831005  c-0.634619 -0.1004 -1.251945 0.6779 -1.956789 0.7408  c-0.6065893 -0.038 -1.0354363 -0.06 -0.8495673 0.6969005  c0.01681 0.711 0.152396 1.3997 0.157345 2.1104  c0.07947 0.7464 0.171287 1.4944 0.238271 2.2351  c0.237411 1.0076 -0.687542 1.1488 -1.414811 0.8598  z m6.8675483 -1.8379  c0.114364 -0.3658 0.206751 -1.2704 -0.114466 -1.3553  c-0.152626 0.5835 -0.225018 1.1888 -0.227537 1.7919  c0.147087 -0.1166 0.265559 -0.2643 0.342003 -0.4366  z"
                  id="sid-6B3EB77F-90E2-4883-8995-18BAD2584278_sid-6B3EB77F-90E2-4883-8995-18BAD2584278_17"></path>
          </svg>
          <svg id="ServiceTask">
            <path style="fill:#72a7d0;stroke:none"
                  d="M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375 6.6676654,3.4929791 6.3336971,3.6092802 6.03125,3.78125 6.02349,3.78566 6.007733,3.77681 6,3.78125 5.8811373,3.761018 5.8125,3.71875 5.8125,3.71875 l -1.6875,-1 -1.40625,1.4375 0.96875,1.65625 c 0,0 0.065705,0.068637 0.09375,0.1875 0.002,0.00849 -0.00169,0.022138 0,0.03125 C 3.6092802,6.3336971 3.4929791,6.6676654 3.375,7 3.3629836,7.0338489 3.3239228,7.0596246 3.3125,7.09375 3.125763,7.4756184 2.875,7.5 2.875,7.5 L 1,8 l 0,2 1.875,0.5 c 0,0 0.250763,0.02438 0.4375,0.40625 0.017853,0.03651 0.046318,0.04988 0.0625,0.09375 0.1129372,0.318132 0.2124732,0.646641 0.375,0.9375 -0.00302,0.215512 -0.09375,0.34375 -0.09375,0.34375 L 2.6875,13.9375 4.09375,15.34375 5.78125,14.375 c 0,0 0.1229911,-0.09744 0.34375,-0.09375 0.2720511,0.147787 0.5795915,0.23888 0.875,0.34375 0.033849,0.01202 0.059625,0.05108 0.09375,0.0625 C 7.4756199,14.874237 7.5,15.125 7.5,15.125 L 8,17 l 2,0 0.5,-1.875 c 0,0 0.02438,-0.250763 0.40625,-0.4375 0.03651,-0.01785 0.04988,-0.04632 0.09375,-0.0625 0.332335,-0.117979 0.666303,-0.23428 0.96875,-0.40625 0.177303,0.0173 0.28125,0.09375 0.28125,0.09375 l 1.65625,0.96875 1.40625,-1.40625 -0.96875,-1.65625 c 0,0 -0.07645,-0.103947 -0.09375,-0.28125 0.162527,-0.290859 0.262063,-0.619368 0.375,-0.9375 0.01618,-0.04387 0.04465,-0.05724 0.0625,-0.09375 C 14.874237,10.52438 15.125,10.5 15.125,10.5 L 17,10 17,8 15.125,7.5 c 0,0 -0.250763,-0.024382 -0.4375,-0.40625 C 14.669647,7.0572406 14.641181,7.0438697 14.625,7 14.55912,6.8144282 14.520616,6.6141566 14.4375,6.4375 c -0.224363,-0.4866 0,-0.71875 0,-0.71875 L 15.40625,4.0625 14,2.625 l -1.65625,1 c 0,0 -0.253337,0.1695664 -0.71875,-0.03125 l -0.03125,0 C 11.405359,3.5035185 11.198648,3.4455201 11,3.375 10.95613,3.3588185 10.942759,3.3303534 10.90625,3.3125 10.524382,3.125763 10.5,2.875 10.5,2.875 L 10,1 8,1 z m 1,5 c 1.656854,0 3,1.3431458 3,3 0,1.656854 -1.343146,3 -3,3 C 7.3431458,12 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z"
                  id="sid-D66D0721-1D5B-46D8-BDE4-9CF64068080F_sid-D66D0721-1D5B-46D8-BDE4-9CF64068080F_17"></path>
          </svg>
          <svg id="ScriptTask">
            <path
                d="m 5,2 0,0.094 c 0.23706,0.064 0.53189,0.1645 0.8125,0.375 0.5582,0.4186 1.05109,1.228 1.15625,2.5312 l 8.03125,0 1,0 1,0 c 0,-3 -2,-3 -2,-3 l -10,0 z M 4,3 4,13 2,13 c 0,3 2,3 2,3 l 9,0 c 0,0 2,0 2,-3 L 15,6 6,6 6,5.5 C 6,4.1111 5.5595,3.529 5.1875,3.25 4.8155,2.971 4.5,3 4.5,3 L 4,3 z"
                style="fill:#72a7d0;stroke:none"
                id="sid-B0A2A3BB-5ACB-4176-A4BC-4C5AA002DB98_sid-B0A2A3BB-5ACB-4176-A4BC-4C5AA002DB98_17"></path>
          </svg>
          <svg id="shell">
            <path d="m 1,2 0,14 16,0 0,-14 z m 1.4,3 12.7,0 0,10 -12.7,0 z" style="fill:#72a7d0;stroke:none"
                  id="sid-13968FA8-79C9-4942-A0BF-F1DD98D60F98_sid-13968FA8-79C9-4942-A0BF-F1DD98D60F98_17"></path>
          </svg>
          <svg id="mule">
            <path style="fill:#bd4848;fill-opacity:1"
                  d="M 8,0 C 3.581722,0 0,3.5817 0,8 c 0,4.4183 3.581722,8 8,8 4.418278,0 8,-3.5817 8,-8 L 16,7.6562 C 15.813571,3.3775 12.282847,0 8,0 z M 5.1875,2.7812 8,7.3437 10.8125,2.7812 c 1.323522,0.4299 2.329453,1.5645 2.8125,2.8438 1.136151,2.8609 -0.380702,6.4569 -3.25,7.5937 -0.217837,-0.6102 -0.438416,-1.2022 -0.65625,-1.8125 0.701032,-0.2274 1.313373,-0.6949 1.71875,-1.3125 0.73624,-1.2317 0.939877,-2.6305 -0.03125,-4.3125 l -2.75,4.0625 -0.65625,0 -0.65625,0 -2.75,-4 C 3.5268433,7.6916 3.82626,8.862 4.5625,10.0937 4.967877,10.7113 5.580218,11.1788 6.28125,11.4062 6.063416,12.0165 5.842837,12.6085 5.625,13.2187 2.755702,12.0819 1.238849,8.4858 2.375,5.625 2.858047,4.3457 3.863978,3.2112 5.1875,2.7812 z"
                  id="sid-0F60258E-8660-4958-B853-EA81351B492B_sid-0F60258E-8660-4958-B853-EA81351B492B_17"></path>
          </svg>
          <svg id="http">
            <path style="fill:#16964d;stroke:none;"
                  d="m 16.704699,5.9229055 q 0.358098,0 0.608767,0.2506681 0.250669,0.250668 0.250669,0.6087677 0,0.3580997 -0.250669,0.6087677 -0.250669,0.2506679 -0.608767,0.2506679 -0.358098,0 -0.608767,-0.2506679 -0.250669,-0.250668 -0.250669,-0.6087677 0,-0.3580997 0.250669,-0.6087677 0.250669,-0.2506681 0.608767,-0.2506681 z m 2.578308,-2.0053502 q -2.229162,0 -3.854034,0.6759125 -1.624871,0.6759067 -3.227361,2.2694472 -0.716197,0.725146 -1.575633,1.7457293 L 7.2329969,8.7876913 Q 7.0897576,8.8055849 7.000233,8.9309334 L 4.9948821,12.368677 q -0.035811,0.06267 -0.035811,0.143242 0,0.107426 0.080572,0.205905 l 0.5729577,0.572957 q 0.125334,0.116384 0.2864786,0.07162 l 2.4708789,-0.760963 2.5156417,2.515645 -0.76096,2.470876 q -0.009,0.02687 -0.009,0.08057 0,0.125338 0.08058,0.205905 l 0.572957,0.572958 q 0.170096,0.152194 0.349146,0.04476 l 3.437744,-2.005351 q 0.125335,-0.08953 0.143239,-0.232763 l 0.17905,-3.392986 q 1.02058,-0.859435 1.745729,-1.575629 1.67411,-1.6830612 2.309735,-3.2049805 0.635625,-1.5219191 0.635625,-3.8585111 0,-0.1253369 -0.08505,-0.2148575 -0.08505,-0.089526 -0.201431,-0.089526 z "
                  id="sid-A58E5CDB-7832-4DD3-98FD-108E88A04F66_sid-A58E5CDB-7832-4DD3-98FD-108E88A04F66_17"></path>
          </svg>
          <!--          定时器启动事件-->
          <svg id="timer" t="1611126460786" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="23638" width="200" height="200">
            <path
                d="M512 967.111c-129.195-2.958-236.6-47.246-322.219-132.892C104.164 748.6 59.847 641.195 56.89 512c2.958-129.195 47.246-236.6 132.892-322.219C275.4 104.164 382.805 59.847 512 56.89c129.195 2.958 236.6 47.246 322.219 132.892C919.836 275.4 964.153 382.805 967.11 512c-2.958 129.195-47.246 236.6-132.892 322.219C748.6 919.836 641.195 964.153 512 967.11z m281.998-173.113c75.094-75.093 113.607-168.505 116.253-280.69-2.646-114.801-41.16-208.213-116.253-283.306-75.093-75.094-168.505-113.607-280.69-116.253-114.801 2.646-208.213 41.16-283.306 116.253-75.094 75.093-113.607 168.505-116.253 280.69 2.646 114.801 41.16 208.213 116.253 283.306C304.81 868.808 397.796 907.321 512 910.194c114.204-2.873 207.19-41.387 281.998-116.196zM512 512h199.111a28.444 28.444 0 0 1 0 56.889H483.556a28.444 28.444 0 0 1-28.445-28.445V256A28.444 28.444 0 0 1 512 256v256z"
                p-id="23639"></path>
          </svg>
          <!--          信号-->
          <svg id="signal" t="1611126640085" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="24481" width="200" height="200">
            <path
                d="M697.41 960.835c0 21.591-17.456 39.047-39.047 39.047h-292.716c-21.591 0-39.047-17.456-39.047-39.047s17.456-39.047 39.047-39.047h107.309v-358.396c-32.255-14.8-54.747-47.21-54.747-85.050 0-51.858 41.98-93.795 93.795-93.795s93.795 41.939 93.795 93.795c0 37.84-22.491 70.252-54.747 85.050v358.396h107.309c21.591 0 39.047 17.456 39.047 39.047zM512 24.114c-250.465 0-454.266 203.798-454.266 454.266 0 121.328 47.251 235.353 133.081 321.185 15.268 15.268 39.907 15.268 55.217 0 15.268-15.308 15.268-39.948 0-55.217-71.071-71.071-110.198-165.49-110.198-265.966 0-207.433 168.692-376.164 376.164-376.164s376.164 168.692 376.164 376.164c0 100.437-39.127 194.935-110.121 266.007-15.268 15.268-15.268 39.948 0 55.217 7.615 7.615 17.611 11.442 27.609 11.442s20.032-3.826 27.609-11.442c85.75-85.794 133.002-199.895 133.002-321.26 0-250.423-203.798-454.225-454.266-454.225zM512 211.666c-147.142 0-266.708 119.571-266.708 266.708 0 71.226 27.763 138.277 78.137 188.609 15.308 15.268 39.907 15.268 55.217 0s15.308-40.025 0-55.217c-35.613-35.613-55.257-82.979-55.257-133.395 0-104.027 84.62-188.609 188.609-188.609s188.609 84.581 188.609 188.609c0 50.414-19.641 97.739-55.257 133.395-15.308 15.19-15.308 39.948 0 55.217 7.575 7.615 17.611 11.442 27.609 11.442s19.993-3.826 27.609-11.442c50.374-50.334 78.137-117.383 78.137-188.609 0-147.142-119.571-266.708-266.708-266.708z"
                p-id="24482"></path>
          </svg>
          <!--          信息-->
          <svg id="message" t="1611127470051" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="25233" width="200" height="200">
            <path
                d="M512 996.693333A484.693333 484.693333 0 1 1 512 27.306667a484.693333 484.693333 0 0 1 0 969.386666z m0-81.92a402.773333 402.773333 0 1 0 0-805.546666 402.773333 402.773333 0 0 0 0 805.546666z"
                p-id="25234"></path>
            <path
                d="M512 316.552533m-68.266667 0a68.266667 68.266667 0 1 0 136.533334 0 68.266667 68.266667 0 1 0-136.533334 0Z"
                p-id="25235"></path>
            <path d="M471.04 481.006933a40.96 40.96 0 1 1 81.92 0v273.066667a40.96 40.96 0 0 1-81.92 0v-273.066667z"
                  p-id="25236"></path>
          </svg>
          <!--异常-->
          <svg id="error" t="1611127746305" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="28967" width="200" height="200">
            <path
                d="M65.95055 956.967304 488.145198 284.655132 578.323033 522.766205 957.478446 60.551074 522.986727 864.524892 422.561503 604.003414Z"
                p-id="28968"></path>
          </svg>
          <svg id="escalation" t="1611127885465" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="29893" width="200" height="200">
            <path
                d="M409.6 412.4672v358.4c136.5504 0.1024 204.8 0.1024 204.8 0v-358.4h133.12L512 130.4576 276.48 412.4672H409.6z m256 409.6H358.4v-358.4H153.6L512 51.2l358.4 412.4672h-204.8v358.4zM102.4 921.6h819.2v51.2H102.4v-51.2z"
                p-id="29894"></path>
          </svg>
          <!--          条件-->
          <svg id="conditional" t="1611127919626" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="30628" width="200" height="200">
            <path
                d="M102.677 102.678c-56.512 0-102.33 45.818-102.33 102.33s45.818 102.33 102.33 102.33 102.33-45.818 102.33-102.33-45.818-102.33-102.33-102.33z m255.827 153.495h613.983c28.281 0 51.166-22.934 51.166-51.165s-22.885-51.165-51.166-51.165H358.504c-28.256 0-51.166 22.934-51.166 51.165s22.91 51.165 51.166 51.165zM102.677 409.67C46.165 409.67 0.347 455.488 0.347 512s45.818 102.33 102.33 102.33 102.33-45.818 102.33-102.33-45.818-102.33-102.33-102.33z m869.81 51.166H358.504c-28.256 0-51.166 22.934-51.166 51.165s22.91 51.165 51.166 51.165h613.983c28.281 0 51.166-22.934 51.166-51.165s-22.885-51.165-51.166-51.165zM102.677 716.66c-56.512 0-102.33 45.819-102.33 102.33s45.818 102.331 102.33 102.331 102.33-45.818 102.33-102.33-45.818-102.33-102.33-102.33z m869.81 51.166H358.504c-28.256 0-51.166 22.934-51.166 51.165s22.91 51.165 51.166 51.165h613.983c28.281 0 51.166-22.934 51.166-51.165s-22.885-51.165-51.166-51.165z"
                p-id="30629"></path>
          </svg>
          <!--          终止-->
          <svg t="1611128331208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="31341" width="200" height="200">
            <path
                d="M512 0.768c282.304 0 511.232 228.864 511.232 511.232 0 282.304-228.864 511.168-511.232 511.168S0.768 794.304 0.768 512C0.768 229.632 229.632 0.768 512 0.768z"
                p-id="31342"></path>
          </svg>
        </defs>

        <defs>
          <filter id="p1" x="0" y="0" width="150%" height="150%">
            <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
          </filter>
        </defs>
      </g>
    </svg>
  </div>
</template>

<script>

export default {
  name: "flowChart",
  props: {
    elements: {
      type: Array,
      default: () => []
    },
    flows: {
      type: Array,
      default: () => []
    },
    diagramWidth: {
      type: Number,
      default: 900
    },
    diagramHeight: {
      type: Number,
      default: 600
    },
    diagramBeginX: {
      type: Number,
      default: 0
    },
    diagramBeginY: {
      type: Number,
      default: 0
    },
    floatingFrame: {
      type: Boolean,
      default: false
    },
    colorPalette: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      dox: ['UserTask', 'ManualTask', 'BusinessRuleTask', 'ReceiveTask', 'ServiceTask', 'HttpServiceTask', 'ScriptTask'],
      round: ['StartEvent', 'EndEvent', 'ThrowEvent', 'IntermediateCatchEvent', 'BoundaryEvent'],
      diamond: ['ExclusiveGateway', 'InclusiveGateway', 'EventBasedGateway', 'ParallelGateway', 'EventGateway'],
      container: ['SubProcess', 'EventSubProcess', 'AdhocSubProcess'],
      upText: [''],
      colors: {
        current: '#409EFF',
        completed: '#67C23A',
        normal: '#bbbbbb',
        deepColor: '#585858'
      }
    }
  },
  mounted() {
    // let color = localStorage.getItem('FlowSVG')
    // this.colors = JSON.parse(color)
  },
  methods: {
    getPoints(v) {
      let s = ''
      v.waypoints.forEach(val => {
        s += val.x + ',' + val.y + ' '
      })
      return s;
    },
    getPath(arr) {
      let x = arr.waypoints[arr.waypoints.length - 1].x - arr.waypoints[0].x
      let y = arr.waypoints[arr.waypoints.length - 1].y - arr.waypoints[0].y
      return 'm' + arr.waypoints[0].x + ',' + arr.waypoints[0].y + ' l' + x + ',' + y;
    },
    getWx(arr) {
      let x = arr.waypoints[arr.waypoints.length - 1].x - arr.waypoints[0].x
      return x / 2
    },
    getWy(arr) {
      let x = arr.waypoints[arr.waypoints.length - 1].y - arr.waypoints[0].y
      return x / 2
    },
    getColor(v, t) {
      if (v.current) {
        return this.colors.current
      }
      if (v.completed) {
        return this.colors.completed
      } else if (t) {
        return this.colors.deepColor
      } else {
        return this.colors.normal
      }
    },
    setColor() {
      let s = JSON.stringify(this.colors);
      localStorage.setItem('FlowSVG', s)
    },
    showF(v) {
      this.$emit('getTask', v)
    },
    showStartEventF(v) {
      this.$emit('getStartEvent', v.id)
    }
  },

}
</script>

<style scoped>
.my-btn {
  position: absolute;
  opacity: 0;
}

.popover-text {

}

</style>